<template>
  <layout class-prefix="layout">
    <Tags :value.sync="record.tags"/>
    <FormItem field-name="备注" placeholder="请输入备注" :value="record.notes" @update:value="onUpdateNotes($event)"/>
    <Tabs :data-source="recordTypeList" :value.sync="record.type"/>
    <NumberPad :value.sync="record.amount" @submit="saveRecord"/>
  </layout>
</template>

<script lang="ts">
import Tags from '@/components/money/Tags.vue';
import FormItem from '@/components/money/FormItem.vue';
import NumberPad from '@/components/money/NumberPad.vue';
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
import recordTypeList from '@/constants/recordTypeList';
import Tabs from '@/components/Tabs.vue';

@Component({
  components: {Tabs, NumberPad, FormItem, Tags},
  computed: {
    recordList() {
      return this.$store.state.recordList;
    }
  }
})
export default class Money extends Vue {
  recordTypeList = recordTypeList;
  record: RecordItem = {tags: this.$store.state.selectedTags, notes: '', type: '-', amount: 0};

  created() {
    this.$store.commit('fetchRecords');
  }

  onUpdateNotes(value: string) {
    this.record.notes = value;
  }

  saveRecord() {
    if (!this.record.tags || this.record.tags.length === 0) {
      return window.alert('请至少选择一个标签');
    }
    this.$store.commit('createRecord', this.record);
    this.record.notes = '';
    this.record.amount = 0;
    console.log(this.record);
  }
}
</script>
<style lang="scss">
.layout-content {
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
</style>
<style lang="scss" scoped>
@import "~@/assets/styles/helper";

</style>
